import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { ProgramItemWrapper } from './style';
import { getImgOnSize } from '@/utils/format';
interface IProps {
  children?: ReactNode;
  program: any;
}

const ProgramItem: FC<IProps> = (props) => {
  const { program } = props;
  return (
    <ProgramItemWrapper>
      <a href="javascript:void(0)" className="program_img">
        <img src={getImgOnSize(program.coverUrl, 40)} alt="" />
        <i className="sprite_icon"></i>
      </a>
      <div className="info">
        <a href="javascript:void(0)">{program.name}</a>
        <a href="javascript:void(0)">{program.radio.name}</a>
      </div>
      <a href="javascript:void(0)" className="categray">
        {program.radio.category}
      </a>
    </ProgramItemWrapper>
  );
};

export default memo(ProgramItem);
